import { useRef,useEffect } from "react"
import { useSelector,useDispatch } from "react-redux"
import { useNavigate } from "react-router-dom"
import {addNum} from '@/store/modules/user'
import './index.scss'
const Text = ()=>{
    const navigate = useNavigate()
    const canvas = useRef(null)
    let ctx = null;
    useEffect(()=>{
        ctx = canvas.current.getContext('2d');
                     //x,y,width,height
        // ctx.fillRect(60,80,200,100)//填充模式
        // ctx.beginPath()//开始
        // ctx.strokeRect(20,20,200,100)//路径模式 
        // ctx.closePath()//结束
        // ctx.beginPath()
        //圆心x，圆心y，圆半径，圆开始角度，圆结束角度，顺时针或逆时针false or true
        // ctx.arc(75,75,50,0,Math.PI*2);
        // ctx.stroke()
        // ctx.closePath()
        // ctx.beginPath()
        // ctx.arc(75,75,35,0,Math.PI,false)
        // ctx.fill()
        // ctx.stroke()
        // ctx.beginPath()
        // ctx.arc(55,55,5,0,Math.PI*2,false)
        // ctx.stroke()
        // ctx.closePath()
        // ctx.beginPath()
        // ctx.arc(95,55,5,0,Math.PI*2,false)
        // ctx.stroke()
        // ctx.moveTo(x,y)//笔移动到某一个点
        // ctx.moveTo(300,200)
        // ctx.lineTo(350,250)//绘制一条当前位置到指定x,y的直线
        // ctx.lineTo(300,250)//画线
        // ctx.lineTo(300,200)//画线
        // ctx.stroke()
        // ctx.beginPath()
        // ctx.moveTo(50,50)
        // ctx.arc(52,50,50,0,Math.PI,true)
        // ctx.stroke()
        ctx.moveTo(300,200);
        //ax,ay,bx,by,radius
        ctx.arcTo(300,150,400,150,50)
        // ctx.arcTo(350,200,400,300,50)
        // ctx.lineTo(600,100)
        // ctx.moveTo(300,200);
        // ctx.lineTo(300,300)
        // ctx.lineTo(300,200)
        //一个控制点x,y;终点x,y
        // ctx.quadraticCurveTo(250,200,250,150)
        // ctx.moveTo(250,150)
        //两个控制点一个终点
        // ctx.bezierCurvTo()
        // ctx.fill()
        ctx.stroke()
        //起始xy结束xy
        // const linearGradient = ctx.createLinearGradient(0,0,100,100)//线性渐变
        // const 
        // linearGradient.addColorStop(0,'red')
        // linearGradient.addColorStop(1,'blue')
        // ctx.fill()
        // ctx.fillStyle = linearGradient;
        // const path = new Path2D();
        // requestAnimationFrame(()=>{

        // })

    },[])
    const removeCanvas = ()=>{
        let h = 0
        const time =setInterval(()=>{
            ctx.clearRect(0,0,ctx.canvas.width,h)
            h++
        },10)
        if(h>=ctx.canvas.height){
            clearInterval(time)
        }
    }
    const {num} = useSelector(state=>state.user)
    const dispatch = useDispatch()
    return (
        <div>
            <div className="box">
                <canvas ref={canvas} className="canvas" width={600} height={400}></canvas>
            </div>
            <button onClick={removeCanvas}>点击</button><button onClick={()=>navigate('/text1')}>跳转</button>
            <div className="a" onClick={()=>{dispatch(addNum(5))}}>{num}</div>
        </div>
    )
}
export default Text;